<template>
    <div>
        <div
            class="date"
            style="width: 100%; text-align: center; color: #464c5b"
        >
            <Row>
                <h2>按日期筛选</h2>
                <br />
                <Col span="24">
                    <Date-picker
                        format="yyyy-MM-dd"
                        type="datetimerange"
                        placement="bottom"
                        placeholder="选择日期"
                        style="margin-bottom: 50px"
                        v-model="fromto"
                        @on-change="fromto = $event"
                        confirm
                    ></Date-picker>
                </Col>
            </Row>
        </div>

        <Table stripe :columns="columns1" :data="showRecords"></Table>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "Records",
    data() {
        return {
            columns1: [
                {
                    title: "实验编号",
                    key: "id",
                },
                {
                    title: "时间",
                    key: "time",
                },
                {
                    title: "实验名称",
                    key: "name",
                },
            ],
            fromto: "",
        };
    },
    components: {},
    mounted() {
        this.$store.dispatch("getHistory", this.$router);
    },
    computed: {
        ...mapState(["historyRecords"]),
        showRecords() {
            // 过滤要求
            if (!this.fromto[0]) return this.historyRecords;
            else {
                console.log(this.fromto);
                let filter = this.historyRecords.filter((record) => {
                    return (
                        record.time >= this.fromto[0] &&
                        record.time < this.fromto[1]
                    );
                });

                return filter;
            }
        },
    },
};
</script>

<style scoped>
</style>
